<template>
    <el-descriptions class="margin-top" title="店铺信息" :column="1" :size="size" border>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <user />
                    </el-icon>
                    店铺名称
                </div>
            </template>
            {{ store?.name }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <iphone />
                    </el-icon>
                    店铺编号
                </div>
            </template>
            {{ store?.sid }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <location />
                    </el-icon>
                    店铺地址
                </div>
            </template>
            {{ store?.address }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <message />
                    </el-icon>
                    店铺评分
                </div>
            </template>
            {{ store?.point }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    店铺商品
                </div>
            </template>
            {{ store?.count }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <clock />
                    </el-icon>
                    创建时间
                </div>
            </template>
            {{ store?.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <clock />
                    </el-icon>
                    认证时间
                </div>
            </template>
            {{ store?.authTime }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    是否通过认证
                </div>
            </template>
            {{ store?.isAuth === 1 ? "是" : "否" }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <aim />
                    </el-icon>
                    快递品牌
                </div>
            </template>
            {{ store?.express }}
        </el-descriptions-item>
        <el-descriptions-item>
            <template #label>
                <div class="cell-item">
                    <el-icon>
                        <edit-pen />
                    </el-icon>
                    店铺描述
                </div>
            </template>
            {{ store?.description === '' ? '暂无描述信息' : store?.description }}
        </el-descriptions-item>
    </el-descriptions>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    Iphone,
    Location,
    Clock,
    EditPen,
    Aim,
    User,
    Message
} from '@element-plus/icons-vue'
import type { ComponentSize } from 'element-plus'
import { queryStoreByUid } from '../assets/net/NetUtils';
import { userInfoStore } from '../assets/userStore/userStore';
import { StoreModel } from '../assets/model/Store';

const userStore = userInfoStore()
const size = ref<ComponentSize>('large')
const store = ref<StoreModel>();

onMounted(() => {
    queryStoreByUid(userStore.uid)
        .then((_reslut) => {
            store.value = _reslut.data[0]
        })
})
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>
